<template>
  <el-container class="main_con">
    <div class="orderdetail">
      <div class="order_content" style="margin-top:0px">
        <span>拼团状态:</span>
        <span style="font-weight: bold">{{ obj.status | statustxt }}</span>
      </div>

      <div class="order_content">
        <div class="conetnt_a">
          <div class="content_c bor">
            <div class="order_title"><span class="order_title_text">订单信息</span></div>
            <div class="line">
              <div class="lb">
                <div class="label">拼团编号:</div>
                <div class="txt">{{ obj.id }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">拼团类型:</div>
                <div class="txt">{{ obj.groupCommodity.type == 1 ? '普通拼团' : '阶梯拼团' }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">开团时间:</div>
                <div class="txt">{{ obj.create_time }}</div>
              </div>
            </div>
          </div>
          <div class="content_c">
            <div class="order_title"><span class="order_title_text">拼团进度</span></div>
            <div class="line">
              <div class="lb">
                <div class="label">当前进度:</div>
                <div class="txt u-flex">
                  <div style="width: 100px;"><el-progress :show-text="false" :percentage="percentage"></el-progress></div>
                  <div class="" style="margin-left: 5px;">
                    <span>{{ obj.num + 1 }}</span>
                    /
                    <span>{{ obj.success_num + 1 }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="line">
              <div class="lb u-flex">
                <div class="label">拼团成员:</div>
                <div class="txt "><img v-for="(item, i) in userlist" style="width: 30px;height: 30px;border-radius: 50%;" :src="item.picurl" /></div>
              </div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="buttons"><el-button v-if="obj.status == 1" size="medium" style="margin-right: 10px" @click="complete()">手动成团</el-button></div>
      </div>
      <div class="order_content">
        <div class="order_items">
          <div class="list">
            <el-table :data="obj.order">
              <el-table-column label="订单编号">
                <template slot-scope="scope">
                  <div class="link">
                    <el-link :href="'#/order/list/all?type=7&keyword=' + scope.row.order_no">{{ scope.row.order_no }}</el-link>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="订单商品">
                <template slot-scope="scope">
                  <div class="pro">
                    <div class="img"><vimage style="width: 80px; height: 80px" :src="scope.row.master" fit="fit"></vimage></div>
                    <div class="txt">
                      <div class="name">{{ scope.row.name }}</div>
                      <div class="class">{{ scope.row.pvs_value }}</div>
                      <el-popover
                        placement="top-start"
                        title="附加规格
                           "
                        width="400"
                        trigger="hover"
                      >
                        <el-table :data="scope.row.attachlist">
                          <el-table-column property="attach_value" label="附加"></el-table-column>
                          <el-table-column property="num" label="数量"></el-table-column>
                          <el-table-column property="attach_price" label="单价"></el-table-column>
                        </el-table>

                        <div slot="reference" v-if="scope.row.attachlist && scope.row.attachlist.length > 0">
                          附加x{{ scope.row.attachlist.length }},共￥{{ scope.row.attach_pirce }}
                        </div>
                      </el-popover>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单价/数量">
                <template slot-scope="scope">
                  ￥{{ scope.row.price }}x{{ scope.row.count }}
                </template>
              </el-table-column>
              <el-table-column label="买家" prop="user_id">
                <template slot-scope="scope">
                  <span>{{ scope.row.user_id | getuser(userlist) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实付款" prop="money">
                <template slot-scope="scope">
                  <span>¥ {{ scope.row.money }}</span>
                  <br />
                  <span>含运费：¥{{ scope.row.ft_price }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {getcollage, completegroup} from '@/api/mall/groupon';
import {getToken, getShopToken, logintype_byurl} from '@/utils/auth';

export default {
  data() {
    return {
      obj: {},
      userlist: [],
      percentage: 0,
      format: ''
    };
  },
  components: {},
  filters: {
    statustxt(status) {
      switch (status) {
        case 1:
          return '待成团';
          break;
        case 2:
          return '已完成';
          break;
        case 11:
          return '已关闭';
          break;
      }
    },
    getuser(id, list) {
      let i = list.findIndex(_ => _.id == id);
      if (i > -1) {
        return list[i].nickname;
      } else {
        return '';
      }
    }
  },

  created() {
    if (this.$route.query.id) {
      //查看详情
      this.getOrder(this.$route.query.id);
    } else {
      //无参数,禁止进入该页面
      this.$router.back(-1);
    }
  },

  methods: {
    complete() {
      this.$confirm('是否手动成团？')
        .then(_ => {
          let o = {};
          o.id = this.$route.query.id;

          this.isLoading = true;
          completegroup(o).then(res => {
            this.isLoading = false;
            this.getOrder(this.$route.query.id);
          });
        })
        .catch({
          //empty
        });
    },
    //获取订单详情数据
    getOrder(id) {
      this.isLoading = true;
      getcollage(id)
        .then(res => {
          console.log(res);
          let obj = res.msg;
          this.percentage = ((obj.num + 1) / (obj.success_num + 1)) * 100;
          let userlist = [];
          userlist.push(obj.user);
          obj.collageItem.forEach(b => {
            if (b.is_robot) {
              // let robot = JSON.parse(a.user_id);
              // let user={
              //   n
              // }
              // userlist.push(user[1]);
            } else {
              userlist.push(b.user);
            }
          });
          this.userlist = userlist;

          this.obj = res.msg;
        })
        .catch(e => {
          this.isLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.orderdetail {
  // background: #FFFFFF;
  .title {
    font-size: 24px;
    color: #333;
    font-weight: 500;
    padding: 40px;
    display: block;
  }
  .order_title {
    display: flex;
    height: 60px;
    background: #ffffff;
    align-items: center;
    .order_title_text {
      display: flex;
      flex: 1;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    // display: block;
    // background-color: #FFFFFF;
  }
}
.order_steps {
  background: #fff;
  padding: 40px 100px;
}
.order_status {
  height: 60px;
  // margin: 0 20px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;

  // justify-content: center;
  // .status_text{

  //   font-size: 24px;
  //   font-family: PingFang SC;
  //   font-weight: bold;
  //   color: #333333;
  // }
}
.order_content {
  margin-top: 20px;
  background: #fff;
  padding: 20px 0;
  color: #606266;
  font-size: 14px;
  padding: 20px;
  .conetnt_a {
    display: flex;
    .content_c {
      flex: 1;
      padding-left: 20px;
    }
  }
  // display: flex;

  .buttons {
    text-align: right;
    padding-bottom: 20px;
    .el-button {
      // background: #4d6ef2;
      &:hover {
        background: #3455da;
        color: #fff;
      }
    }
  }
  .line {
    display: flex;
    // height: 36px;
    // line-height: 36px;
    padding: 10px 0;
    font-size: 14px;
    .lb {
      display: flex;
      flex-grow: 1;

      .label {
        width: 80px;
        text-align: right;
        flex-shrink: 0;
        margin-right: 5px;
      }

      .txt {
        // display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
        // -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
        // overflow: hidden; /*超出的文本隐藏*/
        // text-overflow: 'ellipsis'; /* 溢出用省略号*/
        // -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/

        .weixin {
          font-size: 18px;
          color: #333333;
        }
      }
    }

    .status {
      display: flex;
      width: 300px;

      .label {
        width: 80px;
        text-align: right;

        &::after {
          content: ('：');
        }
      }

      .txt {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}

.order_items {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  color: #606266;
  font-size: 14px;

  .list {
    .pro {
      display: flex;

      .img {
        width: 80px;
        margin-right: 10px;
      }

      .txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        .name {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .total {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .count {
      .line {
        display: flex;
        height: 36px;
        line-height: 36px;

        .label {
          width: 80px;
          text-align: right;
          flex-shrink: 0;

          &::after {
            content: ('：');
          }
        }

        .money {
          font-size: 16px;

          &.red {
            color: #f56c6c;
          }

          &.bold {
            font-weight: bold;
          }
        }
      }
    }
  }
}
.psoRec_item {
  display: flex;
  align-items: center;
  margin-bottom: 22px;

  .label {
    width: 100px;
    text-align: right;
  }

  .content {
    flex-grow: 1;
  }
}
.bor {
  border-right: 1px solid #dcdfe6;
}
</style>
